<template>
  <div class="box">
    <!-- 普通详情页 -->
    <div class="normalPost" v-if="postData.type == 1">
      <div class="header">
        <span class="left">
          <van-icon
            name="arrow-left"
            class="arrow-left"
            @click="$router.back()"
          />
          <img src="../images/sunshine.svg" alt="" />
        </span>
        <div
          @click="handleFollow"
          class="info"
          :class="{ unattention: !postData.has_follow }"
        >
          {{ postData.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">{{ postData.title }}</div>
      <div class="issuer">{{ postData.user.nickname }} 2020-9-26</div>
      <div class="content" v-html="postData.content"></div>
    </div>
    <!-- 视频详情 -->
    <div class="video" v-if="postData.type == 2">
      <video
        controls
        height="300"
        src="https://video.pearvideo.com/mp4/adshort/20200728/cont-1688453-15291317_adpkg-ad_hd.mp4"
        poster="https://timgmb01.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=13e00a6373de7a1a7b0dc83df25a8289&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fb856dcd6884d81c688088626a9b8da60.jpeg"
      ></video>

      <div class="box1">
        <div class="header">
          <img src="../images/tujianmai.jpg" alt="" />
          <div class="name">{{ postData.user.nickname }}</div>
          <div
            @click="handleFollow"
            class="info"
            :class="{ unattention: !postData.has_follow }"
          >
            {{ postData.has_follow ? "已关注" : "关注" }}
          </div>
        </div>
        <div class="title">
          {{ postData.title }}
        </div>
      </div>
    </div>
    <!-- 点赞按钮 -->
    <div class="support">
      <div
        class="icon iconfont icondianzan"
        :class="{ haslike: postData.has_like }"
        @click="handlepraise"
      >
        <span>{{ postData.like_length }}</span>
      </div>
      <div class="iconfont iconweixin">
        <span>微信</span>
      </div>
    </div>
    <div class="commentList">
      <h3>精彩跟帖</h3>
      <CommentMain
        v-for="comment in commentList"
        :key="comment.id"
        :commentData="comment"
      />
    </div>
    <div
      class="more"
      @click="$router.push('/moreComments?id=' + $route.query.id)"
    >
      更多跟帖
    </div>
    <CommentInputDom @reloadComment="loadComment" />
  </div>
</template>

<script>
import LoginVue from "./Login.vue";
import CommentMain from "../components/commet/main";
import CommentInputDom from "../components/commet/inputDom";
export default {
  components: {
    CommentMain,
    CommentInputDom,
  },
  data() {
    return {
      postData: {},
      commentList: [],
    };
  },
  created() {
    this.$axios({
      url: "/post/" + this.$route.query.id,
    }).then((res) => {
      console.log(res);
      this.postData = res.data.data;
    });
    this.loadComment();
  },
  methods: {
    loadComment() {
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data);

        // 如果评论多出三条强制截取
        if (res.data.data.length > 3) {
          res.data.data.length = 3;
        }
        this.commentList = res.data.data;
      });
    },
    handleFollow() {
      //这里是关注按钮和取消按钮
      //但是关注和取消按钮是同一个 不同接口
      //所以要判断到底是哪一个
      if (this.postData.has_follow) {
        this.$axios({
          url: "/user_unfollow/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = false;
        });
      } else {
        this.$axios({
          url: "/user_follows/" + this.postData.user.id,
        }).then((res) => {
          console.log(res.data);
          this.postData.has_follow = true;
        });
      }
    },
    handlepraise() {
      this.$axios({
        url: "/post_like/" + this.$route.query.id,
      }).then((res) => {
        console.log(res.data);
        // 点赞完可以直接加载数据
        // 也可以手动改数据
        if (res.data.message == "点赞成功") {
          this.postData.like_length += 1;
          this.postData.has_like = true;
        } else {
          this.postData.like_length -= 1;
          this.postData.has_like = false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .normalPost {
    padding: 20/360 * 100vw;
    .header {
      display: flex;
      align-items: center;

      .left {
        display: flex;
        align-items: center;
        flex: 1;

        .arrow-left {
          font-size: 16/360 * 100vw;
        }
        img {
          width: 35/360 * 100vw;
          height: 35/360 * 100vw;
        }
      }
      .info {
        border: 1px solid #e4e4e4;
        font-size: 12/360 * 100vw;
        padding: 0 15/360 * 100vw;
        line-height: 20/360 * 100vw;
        border-radius: 10/360 * 100vw;
        &.unattention {
          background-color: #f00;
          color: #fff;
          border: 0;
          border: 1px solid #e4e4e4;
          font-size: 12/360 * 100vw;
          padding: 0 21/360 * 100vw;
          line-height: 20/360 * 100vw;
          border-radius: 10/360 * 100vw;
        }
      }
    }
    .title {
      margin: 10/360 * 100vw 0;
      font-size: 16/360 * 100vw;
      font-weight: 700;
    }
    .issuer {
      font-size: 13/360 * 100vw;
      color: #9c9c9c;
    }
    .content {
      font-size: 14/360 * 100vw;

      /deep/ img {
        max-width: 100%;
        margin: 10/360 * 100vw 0;
      }
    }
  }
  .video {
    margin-top: -30/360 * 100vw;

    video {
      width: 100%;
    }

    .box1 {
      padding: 20/360 * 100vw;
      .header {
        display: flex;
        align-items: center;

        img {
          width: 26/360 * 100vw;
          height: 26/360 * 100vw;
          border-radius: 50%;
        }
        .name {
          font-size: 13/360 * 100vw;
          flex: 1;
          padding-left: 5/360 * 100vw;
          color: #909191;
        }
        .info {
          font-size: 12/360 * 100vw;
          border: 1px solid #e4e4e4;
          padding: 0 15/360 * 100vw;
          line-height: 20/360 * 100vw;
          border-radius: 10/360 * 100vw;
          &.unattention {
            background-color: #f00;
            color: #fff;
            border: 0;
            font-size: 12/360 * 100vw;
            border: 1px solid #e4e4e4;
            padding: 0 21/360 * 100vw;
            line-height: 20/360 * 100vw;
            border-radius: 10/360 * 100vw;
          }
        }
      }
    }
  }
  .support {
    display: flex;
    justify-content: space-between;
    padding: 20/360 * 100vw 52/360 * 100vw;
    .icondianzan {
      border: 1px solid #e4e4e4;
      padding: 5/360 * 100vw 20/360 * 100vw;
      border-radius: 15/360 * 100vw;
      span {
        padding-left: 5/360 * 100vw;
      }
    }
    .iconweixin {
      border: 1px solid #e4e4e4;
      padding: 5/360 * 100vw 20/360 * 100vw;
      border-radius: 15/360 * 100vw;
      color: #00c800;
      span {
        padding-left: 5/360 * 100vw;
        color: #000000;
      }
    }
  }
  .haslike {
    color: red;
  }
  .commentList {
    border-top: 2px solid #e4e4e4;
    h3 {
      margin-top: 20/360 * 100vw;
      text-align: center;
      font-weight: normal;
    }
  }
  .more {
    border: 1px solid #bababa;
    width: 117/360 * 100vw;
    text-align: center;
    margin: 20/360 * 100vw auto;
    border-radius: 20/360 * 100vw;
    line-height: 24/360 * 100vw;
    font-size: 13/360 * 100vw;
    margin-bottom: 80/360 * 100vw;
  }
}
</style>